﻿
@model IEnumerable<Vms.Web.Models.LOG>

@{
    ViewBag.Title = "Index";
}
@Styles.Render("~/Content/themes/base/css")
<h2>Resizable and Dragable Test</h2>
 <style>
#screen { width: 650px; height: 350px; padding: 1px; border:1px solid grey;position:relative;}
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>

<div id="screen">
    <div id="resizable" class="ui-widget-content">
    </div>
</div>

<div class="control-group">
    <div class="control-label">
            <input name="x" id="x" type=text />
            <input name="width" id="width" type=text />
    </div>
    <div class="controls">
        <input name="y" id="y" type=text />
        <input name="height" id="height" type=text />
    </div>
</div>


@section scripts {
<script>
    $(function () {
        $("#resizable").resizable({
            maxHeight: 250,
            maxWidth:  350,
            minHeight: 10,
            minWidth:  10,
            resize: function (event, ui) {
                $("#width").val($(this).width());
                $("#height").val($(this).height());                
            }
        });
    });
    $(function () {
        $("#resizable").draggable({ containment: "parent",
            drag: function (event, ui) {
                var top = $(this).position().top;
                var left = $(this).position().left;
                $("#x").val(left);
                $("#y").val(top);
                $("#width").val($(this).width());
                $("#height").val($(this).height());                
            }
        });
    });
    $("#x").keyup(function () {
        var offset = $("#screen").offset();
        var x = offset.left + parseInt($("#x").val());
        var y = offset.top + parseInt($("#y").val());
        $("#resizable").offset({ top: y, left: x })
    });
    $("#y").keyup(function () {
        var offset = $("#screen").offset();
        var x = offset.left + parseInt($("#x").val());
        var y = offset.top + parseInt($("#y").val());
        $("#resizable").offset({ top: y, left: x })
    });
    $("#width").keyup(function () {
        $("#resizable").width($(this).val());
    });
    $("#height").keyup(function () {
        $("#resizable").height($(this).val())
    });
</script>
}
